```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代应用开发安全技术指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .tech-icon {
            font-size: 2.5rem;
            color: #3b82f6;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.8;
            margin: 0.15em 0.1em 0 0;
            font-weight: bold;
            color: #1d4ed8;
        }
        .comparison-table {
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .comparison-table th {
            background-color: #1d4ed8;
            color: white;
        }
        .comparison-table tr:nth-child(even) {
            background-color: #f8fafc;
        }
        .comparison-table tr:hover {
            background-color: #eef2ff;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">现代应用开发安全技术指南</h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">
                探索保障数字世界的核心技术 - 从认证授权到数据传输加密
            </p>
            <div class="flex justify-center space-x-4">
                <a href="#oauth2" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300">
                    <i class="fas fa-shield-alt mr-2"></i>开始探索
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-6xl py-12 px-4">
        <!-- Introduction -->
        <section class="mb-20">
            <p class="text-lg text-gray-700 drop-cap">在现代应用开发中，安全性是至关重要的。无论是用户身份验证、数据传输加密，还是 API 的安全性，都需要开发者深入理解并合理应用各种安全技术。</p>
        </section>

        <!-- OAuth2 Section -->
        <section id="oauth2" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="tech-icon mr-4">
                    <i class="fas fa-key"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-gray-800">1. OAuth2：授权与认证的行业标准</h2>
                    <div class="w-20 h-1 bg-blue-500 mt-2"></div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">1.1 什么是 OAuth2？</h3>
                    <p class="text-gray-700">OAuth2 是一种开放授权协议，允许用户授权第三方应用访问其资源，而无需共享用户名和密码。OAuth2 广泛应用于单点登录（SSO）和 API 授权场景。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">1.2 OAuth2 的核心概念</h3>
                    <ul class="space-y-2 text-gray-700">
                        <li><i class="fas fa-user text-blue-500 mr-2"></i><strong>资源所有者（Resource Owner）</strong>：通常是用户，拥有资源的访问权限。</li>
                        <li><i class="fas fa-desktop text-blue-500 mr-2"></i><strong>客户端（Client）</strong>：第三方应用，请求访问资源。</li>
                        <li><i class="fas fa-server text-blue-500 mr-2"></i><strong>授权服务器（Authorization Server）</strong>：负责验证用户身份并颁发访问令牌。</li>
                        <li><i class="fas fa-database text-blue-500 mr-2"></i><strong>资源服务器（Resource Server）</strong>：存储用户资源，验证访问令牌后提供资源。</li>
                    </ul>
                </div>
            </div>

            <div class="bg-white p-8 rounded-xl shadow-md mb-8 card-hover transition duration-300">
                <h3 class="text-2xl font-semibold mb-4 text-gray-800">1.3 OAuth2 的授权流程</h3>
                
                <div class="mermaid mb-6">
                    sequenceDiagram
                        participant User
                        participant Client
                        participant AuthServer
                        participant ResourceServer
                        User->>Client: 访问应用
                        Client->>AuthServer: 重定向到授权页面
                        User->>AuthServer: 登录并授权
                        AuthServer->>Client: 返回授权码
                        Client->>AuthServer: 使用授权码请求令牌
                        AuthServer->>Client: 返回访问令牌
                        Client->>ResourceServer: 使用令牌请求资源
                        ResourceServer->>Client: 返回受保护资源
                </div>
                
                <div class="space-y-4">
                    <div class="p-4 bg-blue-50 rounded-lg">
                        <h4 class="font-bold text-blue-700 mb-2">授权码模式（Authorization Code）</h4>
                        <p class="text-gray-700">用户访问客户端，客户端重定向到授权服务器。用户登录并授权，授权服务器返回授权码。客户端使用授权码向授权服务器请求访问令牌。授权服务器返回访问令牌，客户端使用令牌访问资源。</p>
                    </div>
                    <div class="p-4 bg-green-50 rounded-lg">
                        <h4 class="font-bold text-green-700 mb-2">简化模式（Implicit）</h4>
                        <p class="text-gray-700">适用于纯前端应用，授权服务器直接返回访问令牌。</p>
                    </div>
                    <div class="p-4 bg-purple-50 rounded-lg">
                        <h4 class="font-bold text-purple-700 mb-2">密码模式（Resource Owner Password Credentials）</h4>
                        <p class="text-gray-700">用户直接提供用户名和密码给客户端，客户端使用这些信息请求访问令牌。</p>
                    </div>
                    <div class="p-4 bg-yellow-50 rounded-lg">
                        <h4 class="font-bold text-yellow-700 mb-2">客户端凭证模式（Client Credentials）</h4>
                        <p class="text-gray-700">客户端使用自己的凭证直接请求访问令牌，适用于服务器到服务器的通信。</p>
                    </div>
                </div>
            </div>

            <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                <h3 class="text-2xl font-semibold mb-4 text-gray-800">1.4 实际应用</h3>
                <div class="flex items-start">
                    <div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <p class="text-gray-700">在 <code class="bg-gray-100 px-2 py-1 rounded">ts-web</code> 项目中，团队使用 OAuth2 授权码模式实现了单点登录功能。用户通过 Google 登录后，系统获取访问令牌并访问用户的 Google 日历数据。</p>
                </div>
            </div>
        </section>

        <!-- JWT Section -->
        <section id="jwt" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="tech-icon mr-4">
                    <i class="fas fa-fingerprint"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-gray-800">2. JWT：轻量级的身份验证与信息交换</h2>
                    <div class="w-20 h-1 bg-blue-500 mt-2"></div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">2.1 什么是 JWT？</h3>
                    <p class="text-gray-700">JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在各方之间安全地传输信息。JWT 通常用于身份验证和信息交换。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">2.2 JWT 的结构</h3>
                    <div class="mermaid">
                        graph LR
                            A[JWT] --> B[Header]
                            A --> C[Payload]
                            A --> D[Signature]
                            B --> E[令牌类型]
                            B --> F[签名算法]
                            C --> G[用户ID]
                            C --> H[角色]
                            C --> I[过期时间]
                            D --> J[验证完整性]
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">2.3 JWT 的工作流程</h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3 mt-1">
                                <i class="fas fa-1"></i>
                            </div>
                            <p class="text-gray-700">用户登录后，服务器生成 JWT 并返回给客户端。</p>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3 mt-1">
                                <i class="fas fa-2"></i>
                            </div>
                            <p class="text-gray-700">客户端在后续请求中携带 JWT。</p>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3 mt-1">
                                <i class="fas fa-3"></i>
                            </div>
                            <p class="text-gray-700">服务器验证 JWT 的签名和声明，决定是否授权访问。</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">2.4 实际应用</h3>
                    <div class="flex items-start">
                        <div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
                            <i class="fas fa-code-branch"></i>
                        </div>
                        <p class="text-gray-700">在 <code class="bg-gray-100 px-2 py-1 rounded">ts-api</code> 项目中，团队使用 JWT 实现了无状态的身份验证。用户登录后，系统生成 JWT 并返回给客户端。客户端在每次请求 API 时携带 JWT，服务器验证 JWT 后处理请求。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- HTTPS Section -->
        <section id="https" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="tech-icon mr-4">
                    <i class="fas fa-lock"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-gray-800">3. HTTPS：安全的数据传输</h2>
                    <div class="w-20 h-1 bg-blue-500 mt-2"></div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">3.1 什么是 HTTPS？</h3>
                    <p class="text-gray-700">HTTPS（Hypertext Transfer Protocol Secure）是 HTTP 的安全版本，通过 SSL/TLS 加密数据传输，防止数据被窃取或篡改。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">3.2 HTTPS 的工作原理</h3>
                    <div class="mermaid">
                        sequenceDiagram
                            participant Client
                            participant Server
                            Client->>Server: HTTPS请求
                            Server->>Client: 发送SSL/TLS证书
                            Client->>Client: 验证证书
                            Client->>Server: 协商加密算法
                            Server->>Client: 确认安全连接
                            Client->>Server: 加密数据传输
                    </div>
                </div>
            </div>

            <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                <h3 class="text-2xl font-semibold mb-4 text-gray-800">3.3 实际应用</h3>
                <div class="flex items-start">
                    <div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <p class="text-gray-700">在 <code class="bg-gray-100 px-2 py-1 rounded">ts-mobile</code> 项目中，团队配置了 HTTPS，确保客户端和服务器之间的通信安全。通过使用 Let's Encrypt 的免费 SSL 证书，团队实现了零成本的 HTTPS 配置。</p>
                </div>
            </div>
        </section>

        <!-- WS-Security Section -->
        <section id="ws-security" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="tech-icon mr-4">
                    <i class="fas fa-shield-virus"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-gray-800">4. WS-Security：Web 服务的安全性</h2>
                    <div class="w-20 h-1 bg-blue-500 mt-2"></div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">4.1 什么是 WS-Security？</h3>
                    <p class="text-gray-700">WS-Security 是一种用于保护 Web 服务的安全标准，提供了消息级别的安全性，包括身份验证、数据加密和签名。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">4.2 WS-Security 的核心功能</h3>
                    <ul class="space-y-2 text-gray-700">
                        <li><i class="fas fa-user-check text-blue-500 mr-2"></i><strong>身份验证</strong>：通过用户名令牌、X.509 证书等方式验证用户身份。</li>
                        <li><i class="fas fa-lock text-blue-500 mr-2"></i><strong>数据加密</strong>：使用 XML 加密标准（XML Encryption）加密消息内容。</li>
                        <li><i class="fas fa-signature text-blue-500 mr-2"></i><strong>数字签名</strong>：使用 XML 签名标准（XML Signature）验证消息的完整性和来源。</li>
                    </ul>
                </div>
            </div>

            <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                <h3 class="text-2xl font-semibold mb-4 text-gray-800">4.3 实际应用</h3>
                <div class="flex items-start">
                    <div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <p class="text-gray-700">在 <code class="bg-gray-100 px-2 py-1 rounded">ts-enterprise</code> 项目中，团队使用 WS-Security 保护 SOAP Web 服务。通过配置用户名令牌和 X.509 证书，团队实现了消息级别的安全性，确保 Web 服务的机密性和完整性。</p>
                </div>
            </div>
        </section>

        <!-- Comparison Section -->
        <section id="comparison" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="tech-icon mr-4">
                    <i class="fas fa-balance-scale"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-gray-800">5. 四种技术的对比</h2>
                    <div class="w-20 h-1 bg-blue-500 mt-2"></div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full comparison-table">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 text-left">特性</th>
                            <th class="px-6 py-3 text-left">OAuth2</th>
                            <th class="px-6 py-3 text-left">JWT</th>
                            <th class="px-6 py-3 text-left">HTTPS</th>
                            <th class="px-6 py-3 text-left">WS-Security</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="px-6 py-4 font-medium">主要用途</td>
                            <td class="px-6 py-4">授权与认证</td>
                            <td class="px-6 py-4">身份验证与信息交换</td>
                            <td class="px-6 py-4">数据传输加密</td>
                            <td class="px-6 py-4">Web 服务安全性</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 font-medium">适用场景</td>
                            <td class="px-6 py-4">单点登录、API 授权</td>
                            <td class="px-6 py-4">无状态身份验证</td>
                            <td class="px-6 py-4">客户端与服务器通信</td>
                            <td class="px-6 py-4">SOAP Web 服务</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 font-medium">安全性</td>
                            <td class="px-6 py-4">高</td>
                            <td class="px-6 py-4">高</td>
                            <td class="px-6 py-4">高</td>
                            <td class="px-6 py-4">高</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 font-medium">复杂性</td>
                            <td class="px-6 py-4">中</td>
                            <td class="px-6 py-4">低</td>
                            <td class="px-6 py-4">低</td>
                            <td class="px-6 py-4">高</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- Applications Section -->
        <section id="applications" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="tech-icon mr-4">
                    <i class="fas fa-project-diagram"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-gray-800">6. 实际项目中的应用</h2>
                    <div class="w-20 h-1 bg-blue-500 mt-2"></div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">6.1 在 <code class="bg-gray-100 px-2 py-1 rounded">ts-web</code> 项目中集成 OAuth2</h3>
                    <p class="text-gray-700">团队使用 OAuth2 授权码模式实现了单点登录功能。用户通过 Google 登录后，系统获取访问令牌并访问用户的 Google 日历数据。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">6.2 在 <code class="bg-gray-100 px-2 py-1 rounded">ts-api</code> 项目中使用 JWT</h3>
                    <p class="text-gray-700">团队使用 JWT 实现了无状态的身份验证。用户登录后，系统生成 JWT 并返回给客户端。客户端在每次请求 API 时携带 JWT，服务器验证 JWT 后处理请求。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">6.3 在 <code class="bg-gray-100 px-2 py-1 rounded">ts-mobile</code> 项目中配置 HTTPS</h3>
                    <p class="text-gray-700">团队配置了 HTTPS，确保客户端和服务器之间的通信安全。通过使用 Let's Encrypt 的免费 SSL 证书，团队实现了零成本的 HTTPS 配置。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800">6.4 在 <code class="bg-gray-100 px-2 py-1 rounded">ts-enterprise</code> 项目中使用 WS-Security</h3>
                    <p class="text-gray-700">团队使用 WS-Security 保护 SOAP Web 服务。通过配置用户名令牌和 X.509 证书，团队实现了消息级别的安全性，确保 Web 服务的机密性和完整性。</p>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <p class="hover:text-white transition duration-300">
                        <i class="fas fa-map-marker-alt mr-2"></i>
                        <a href="http://www.yuque.com/jtostring" target="_blank" rel="noopener noreferrer">http://www.yuque.com/jtostring</a>
                    </p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-xl">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-xl">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-xl">
                        <i class="fab fa-linkedin"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                &copy; 2023 技术小馆. 版权所有.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            sequence: {
                diagramMarginX: 50,
                diagramMarginY: 10,
                boxTextMargin: 5,
                noteMargin: 10,
                messageMargin: 35,
                mirrorActors: true
            }
        });
    </script>
</body>
</html>
```